[#ftl]
require({async:false},["dijit/TitlePane"
                       ,"dijit/form/SimpleTextarea"
                       ,"dijit/form/CheckBox"
                       ,"dijit/form/Select"
                       ,"dijit/form/ComboBox"
                       ,"dijit/form/TimeTextBox"
                       ,"dijit/form/DateTextBox"
                       ,"dijit/form/ValidationTextBox"],function(){});    

[@keyword "agile.Metadata"/]
agile.singoton("agile.Metadata",{
	_readOnly:false /*[#--true for a read only attribute,the editor will be protected--]*/
	,_ignore:false /*[#--true to ignore an attribute, no editor will be shown, the attribute will be ignored--]*/
	,_disabled:false	/*[#--true to disable an attribute,the editor will be protected--]*/
	,_hidden:false
	,label:""	/*[#--description of the mock-up attribute, TODO:support i18n--]*/
	,name:null/*[#--name of the mock-up attribute--]*/
	,renderAsJson:true
	,renderAsOuterHtml:false
	,renderAsInnerHtml:false
	,renderAsHtmlAttr:true
	,htmlAttrName:null	
    ,editorWidget:null
	,editorClass:null
	,templateString:"<table><tr><td data-dojo-attach-point='labelNode' style='width:120px;cursor:help'></td><td><div data-dojo-attach-point='editor' data-dojo-type='{this_editorClass}' data-dojo-props=\"placeHolder:'{this_placeHolder}'\"></div></td></tr></table>"
	,filters:null	
	,tooltip:""
	,placeHolder:""
	,options:null
	,isSimple:true
	,metadataCategory:"parameters"
	,"-chains-":{
		initializeEditor:"after"
	}
	,constructor:function(){
	}
	/*[#--method will be called when editor widget trigger the onChange event, the parsed value will be passed to the onValueChanged callback--]*/	
	,parse:function(text){
		return text;
	}
	/*[#--method will be called when the metadata value is shown on the editor widget--]*/
	,format:function(value){
		return value;
	}
	,onStartup:function(editorWidget){
		
	}
	,initializeEditor:function(editorWidget){
	}
	,getTemplateString:function(){		   
//		if(this.templateString){
//			return lang.replace(this.templateString,nlsStrings);
//		}
		return this.templateString;
	}
	/*notify the attribute widget for the value change*/
	,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
//		console.log("############,onValueChange value=",value);
		if(widget.delegate){
			widget.delegate.reset1(name,value);			
		}else{
			widget.reset1(name,value);
		}
		//widget.reset1(name,value);
//		//console.log("##############onValueChange:",name,value);
		widget.metadata(this.metadataCategory +"."+name,value);
	}
	,ignore:function(widget,sourceType){
		return this._ignore;
	}
	,readOnly:function(widget,sourceType){
		return this._readOnly;	   			
	}
	,disabled:function(widget,sourceType){
		return this._disabled;	   			
	}
	,hidden:function(widget,sourceType){
		return this._hidden;	   			
	}
	,isRenderAsJson:function(widget,sourceType){
		return this.renderAsJson?true:false;
	}
	,isRenderAsOuterHtml:function(widget,sourceType){
		return this.renderAsOuterHtml?true:false;
	}
	,isRenderAsInnerHtml:function(widget,sourceType){
		return this.renderAsInnerHtml?true:false;
	}
	,isRenderAsHtmlAttr:function(widget,sourceType){
		return this.renderAsHtmlAttr?true:false;
	}
	,toRenderAsInnerHtml:function(value,widget,sourceType){
		if(value == null || (typeof value =="string" && value == "")) return "";
		return value;
	}
	,toHtml:function(value,widget,sourceType){
		if(value == null || (typeof value =="string" && value == "")) return "";		
		if(this.htmlAttrName == null){
			return this.name + "=\""+value+"\" ";	
		}else{
			return this.htmlAttrName + "=\""+value+"\" ";
		}		
	}
	,toJson:function(value,widget,sourceType){
		if(value == null || (typeof value =="string" && value == "")) return "";		
		return this.name + ':"'+value+'" ';	
	}
	,toString:function(value){
		return value;
	}
});


[@keyword "agile.TextMetadata"/]
agile.singoton("agile.TextMetadata",agile.Metadata,{
	editorClass:"dijit/form/ValidationTextBox",pattern:".*"
	,onStartup:function(editorWidget){
		style.set(editorWidget.editor.domNode,{width:"300px"});
	}
	,initializeEditor:function(editorWidget){
		var editor = editorWidget.editor;
		editor.set("pattern",this.pattern);
	}
	,parse:function(value){
		return value?value:null;
	}
	,format:function(value){
		return value?value:"";
	}
});

[@keyword "agile.URLMetadata"/]
agile.singoton("agile.URLMetadata",agile.Metadata,{
	editorClass:"dijit/form/TextBox"
	,onStartup:function(editorWidget){
		style.set(editorWidget.editor.domNode,{width:"300px"});
	}
	,parse:function(value){
		return value?value:null;
	}
	,format:function(value){
		return value?value:"";
	}
});

[@keyword "agile.ArrayMetadata"/]
agile.singoton("agile.ArrayMetadata",agile.TextMetadata,{
 	/*@Override*/
	parse:function(value){
		var array = value;
//		if(lang.isArray(value)){
//			object = value;
//		}else{
//			if(typeof value =="string" && value != ""){
//				object = value.split(",");
//				for(var i = object.length - 1; i >= 0; i--){
//					if(object[i] == ""){
//						object.splice(i,1);
//					}
//				}
//			}
//		}
		
		if(value && typeof value == "string"){
			array = value.split(",");
			for(var i = array.length - 1; i >= 0; i--){
				if(!array[i]){
					array.splice(i,1);
				}
			}
		}
		return array;
	}
	
	 /*@Override*/
	,format:function(value){
		var string = null;
		if(lang.isArray(value)){
			//string = json.parse(value);
			////console.log("*****value*****",value)
			string = value.toString();			
		}else{
			agile.assertError("Array is expected,value type:'{0}'",[typeof value]);
		}
//		//console.log("format*****value*****",value,string)
		return string;						
	}	
//	,toHtml:function(value,widget,sourceType){
//		value = this.format(value);
//		//TODO:translate the attribute js name to html, e.g. zIndex -> z-index
//		return this.name + "=\""+value+"\" ";
//	}
//	,toJson:function(value,widget,sourceType){
//		if(value == null || value.length == 0) return "";
//		var content = this.name + ":[";
//		for(var i = 0; i < value.length; i++){
//			content += "'" + value[i] +"',"
//		}
//		content = content.substring(0,content.length - 1);
//		content += "] ";
//		//return this.name + ":["+this.format(value)+"] ";
//		return content;
//	}
});


[@keyword "agile.ObjectMetadata"/]
agile.singoton("agile.ObjectMetadata",agile.TextMetadata,{      
	/*@Override*/	
	parse:function(value){
		if(value == null){
			return null;
		}
		return json.stringify(value);
	}	

	/*@Override*/
	,format:function(value){
		var string = null;
		if(lang.isObject(value)){
			string = json.parse(value,false);
			//string = string.substring(string.indexOf("{")+1,string.lastIndexOf("}"));
		}else{				
			agile.assertError("Object is expected,value type:'{0}'",[typeof value]);
		}
		return string;						
	}		
//	,toHtml:function(value,widget,sourceType){
//		value = this.format(value);
//		return this.name + "=\""+value+"\" ";
//	}
//	,toJson:function(value,widget,sourceType){
//		if(value == null) return "";		
//		return this.name + ":{"+this.format(value)+"} ";	
//	}
});


[@keyword "agile.MultiTextMetadata"/]
agile.singoton("agile.MultiTextMetadata",agile.Metadata,{
	 editorClass:"dijit/form/SimpleTextarea"
//	,toJson:function(value,widget,sourceType){
//		if(value == "" || value == null) return "";		
//		return this.name + ':"'+value+"'";	
//	}
	,onStartup:function(editorWidget){
//		console.log(this.declaredClass,"#########agile.MultiTextMetadata[editorWidget]",editorWidget);
		style.set(editorWidget.editor.domNode,{width:"300px",height:"60px"});
	}	
	,parse:function(value){
		return value?value.replace(/#/g,"\n"):"";
	}
//	,format:function(value){
//		return value?value.replace(/\n/g,"#"):"";
//	}
});


[@keyword "agile.BooleanMetadata"/]
agile.singoton("agile.BooleanMetadata",agile.Metadata,{
		editorClass:"dijit/form/CheckBox"
			
//		,onStartup:function(editorWidget){
//			
//			var listener= lang.hitch(this,function(name,oldValue,newValue){
//				console.info("********value change:",name,oldValue,newValue);
//				if(this.context != null){
//					if(this.editor.isValid == undefined || (typeof this.editor.isValid == "function" && this.editor.isValid())){
//						this.editorMetadata.onValueChange(this.context.getCurrentWidget(),this.editorMetadata.name,this.editorMetadata.parse(newValue));				}				
//				}
//			});
//			
//			if(this.editorMetadata.editorClass == "dijit/form/CheckBox"){
//				this.editor.watch("checked",listener);
//			}
//		}
		,initializeEditor:function(editorWidget){
			//console.warn("BooleanMetadata-CheckBox",this.name);
		}
		,parse:function(value){
			if(typeof value == "boolean"){
				return value;
			}else{
				return (value == "on" || value == "true" || value != null);	
			}			
		}
		,format:function(value){
			if(typeof value == "boolean"){
				return value;
			}else{
				return (value == "on" || value != null);	
			}
		}
});


[@keyword "agile.NumberMetadata"/]
agile.singoton("agile.NumberMetadata",agile.Metadata,{
	//editorClass:"dijit/form/NumberTextBox"
	editorClass:"dijit/form/ValidationTextBox"
	,unit:null
	,placeHolder:"123456"
	,integer:true
	,positive:null
	,onStartup:function(editorWidget){
//		var editor = editorWidget.editor;
//		if((this.unit){
//			on(editor,"onChange",this,function(value){
//				if(this.unit && value.indexOf(this.unit) == -1){
//					editor.reset1("value",value+this.unit);
//				}
//			});
//		}
	}
	,initializeEditor:function(editorWidget){
		var editor = editorWidget.editor;
		
		var handler = editor.on("change",lang.hitch(this,function(value){
			if(value && this.unit && value.indexOf(this.unit) == -1){
				editor.reset1("value",value+this.unit);
			}
		}));
		var xx = aspect.after(editorWidget,"release",lang.hitch(this,function(){
//			dojo.disconnect(handler);
//			dojo.disconnect(xx);
			handler.remove();
			xx.remove();
		}));
				
		var regExp = "\\d+";//positive integer
		if(!this.integer){//positive decimal
			regExp = "\\d+\\.?\\d*";
		}
		if(this.positive == true){
			
		}else if(this.positive == false){
			regExp = "-("+regExp+")";
		}else{
			regExp = "-?("+regExp+")";
		}
		
		if(this.unit){
			regExp = "^(("+regExp+")" + "("+this.unit+")?)$";
		}else{
			regExp = "^("+regExp+")$";
		}
		//editor.set("regExp",regExp);
		editor.set("pattern",regExp);
	}
	,parse:function(value){
		//console.log("NumberMetadata,parse value=",value,typeof value);
		if(typeof value == "number"){
			return value;
		}
		
		if(value){
			if(this.unit){
				if(value.indexOf(this.unit) == -1){
					value += this.unit;
				}
			}
			else{
				try{
					value = parseFloat(value);
				}catch(e){
					console.error("[NumberMetadata]unexpected number string:",value);
				}
			}
		}else{
			value = null;
		}		
//		//console.log("@@NumberMetadata,parse value=",value,typeof value);
		return value;
	}
	,format:function(value){
		//console.log("NumberMetadata,format value=",value,typeof value);
		if(value){
			if(this.unit && value.indexOf(this.unit) == -1){
				value = value + this.unit;
			}
		}
		return value;
	}
});


[@keyword "agile.NumberSpinnerMetadata"/]
agile.singoton("agile.NumberSpinnerMetadata",agile.NumberMetadata,{				
//	editorClass:"dijit/form/NumberSpinner"
});
[@keyword "agile.DateMetadata"/]
agile.singoton("agile.DateMetadata",agile.Metadata,{	
	 MINIMUM:new Date('1970-01-01'),MAXIMUM:new Date('2999-12-31')
//	 MINIMUM:'1970-01-01',MAXIMUM:'2999-12-31'
	,editorClass:"dijit/form/DateTextBox"
	,dateFormat: new RegExp("^\\d{4}-\\d{2}-\\d{2}$")
//	,toHtml:function(value,widget,sourceType){
//		//console.warn("agile.DateMetadata:toHtml()****value",value);
//		value = locale.format(value,{formatLength:"medium",selector:"date",datePattern:"yyyy-MM-dd"});
////		if(this.outputType == "json"){			
////			return this.name + ':"'+value+'" ';
////		}else{
//			//TODO:translate the attribute js name to html, e.g. zIndex -> z-index
//			return this.name + "='"+value+'" ';
////		}
//	}	
//	,toJson:function(value,widget,sourceType){
//		if(value == null) return "";
//		value = locale.format(value,{formatLength:"medium",selector:"date",datePattern:"yyyy-MM-dd"});					
//		return this.name + ':"'+value+'" ';	
//	}
//	,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){    
//		if(widget.delegate){
//			widget.delegate.reset1(name,value);			
//		}else{
//			widget.reset1(name,value);
//		}
//		//widget.reset1(name,value);
//		widget.metadata(this.metadataCategory +"."+name,value);
//	}
	,parse:function(text){
//		var date = null;
//		if(text){
//			if(typeof text == "string"){
//				if(this.dateFormat.test(text)){
//					date = locale.parse(text,{formatLength:"medium",selector:"date",datePattern:"yyyy-MM-dd"});
//				}else{
//					console.error("invalid date=",text,",expected format=yyyy-MM-dd");
//				}	
//			}else if(text.constructor == Date){
//				date = text;
//			}			
//		}
//		console.warn("agile.DateMetadata:parse()****text=",text instanceof Date,"text" instanceof String, typeof "text");
//		return date;
		if(text instanceof Date){
			//console.warn("########",text.getDate(),isNaN(text.getDate()),locale.format(text,{formatLength:"medium",selector:"date",datePattern:"yyyy-MM-dd"}))
			if(isNaN(text.getDate())){
				return null;
			}
			return text;
		}else if(typeof text == "string" && text){
			text = locale.parse(text,{formatLength:"medium",selector:"date",datePattern:"yyyy-MM-dd"});
		}
		return text;
	}
	,format:function(date){
		console.warn("agile.DateMetadata:format()****date=",date);
		if(typeof date == "string"){
			
		}else if (date instanceof Date){
			if(isNaN(date.getDate())){
				return null;
			}
			date = locale.format(date,{formatLength:"medium",selector:"date",datePattern:"yyyy-MM-dd"});
		}
		return date;
	}
});


[@keyword "agile.TimeMetadata"/]
//dojo.require("dojo.date");
//dojo.require("locale");
//dojo.require("dojo.date.stamp");
agile.singoton("agile.TimeMetadata",agile.Metadata,{
	editorClass:"dijit/form/TimeTextBox"
	,MINIMUM:locale.parse("1970-01-01 00:00:01",{formatLength:"long",selector:"date",datePattern:"yyyy-MM-dd HH:mm:ss"})
	,MAXIMUM:locale.parse("1970-01-01 23:59:59",{formatLength:"long",selector:"date",datePattern:"yyyy-MM-dd HH:mm:ss"})
//		/*@Override*/
//		,format:function(value){
//			var string = null;
//			if(value instanceof Date){
//				//html = locale.format(value,{formatLength:"short",selector:"time",timePattern:"yyyy-MM-dd HH:mm"});
//				string = value.toString().replace(/.*1970\s(\S+).*/,'T$1');
//			}else{
//				agile.assertError("Time is expected,value type:'{0}'",[typeof value]);
//			}
//			return string;						
//		}
//	,toHtml:function(value,widget,sourceType){
//		//console.warn("agile.TimeMetadata:toHtml()****value",value);
//		if(value == null) return "";				
//		return this.name + "='"+value.toString().replace(/.*1970\s(\S+).*/,'T$1')+'" ';
//	}	
//	,toJson:function(value,widget,sourceType){
//		//console.warn("agile.TimeMetadata:toJson()****value",value);
//		if(value == null) return "";							
//		return this.name + ':"'+value.toString().replace(/.*1970\s(\S+).*/,'T$1')+'"';	
//	}
	,parse:function(value){
		if(typeof value == "string" && value){
			value = locale.parse(("1970-01-01"+value).replace(/T/," "),{formatLength:"long",selector:"date",datePattern:"yyyy-MM-dd HH:mm:ss"});
		}		
		return value;
	}
	,format:function(value){
//		var text = null;
//		if(value){
//			text = value.toString().replace(/.*1970\s(\S+).*/,'T$1');
//		}
//		return text;
		return value;
	}
});


[@keyword "agile.TimeNumberMetadata"/]
agile.singoton("agile.TimeNumberMetadata",agile.NumberMetadata,{
	parse:function(value){
				
		if(value){
			if(this.unit){
				value = value.replace(this.unit,"");
			}
			value = parseFloat(value);
			if(value < 10){
				value = "T00:0"+value+":00";
			}else if(value < 60){
				value = "T00:"+value+":00";
			} else{
				var hour = value / 60, minute = value % 60;
				value = "T"+(hour>9?hour:"0"+hour)+":" + (minute>9?minute:"0"+minute) +":00";
			}
		}
		
		return value;
	}
	,format:function(value){
		//console.log("XXX:",value);
		if(value){
			var s = value.substring(1).split(":");
			value = parseFloat(s[0]) * 60 + parseFloat(s[1]) + (this.unit?this.unit:"");
		}
		return value;
	}
});


[@keyword "agile.ComboMetadata"/]
agile.singoton("agile.ComboMetadata",agile.Metadata,{
	editorClass:"dijit/form/ComboBox"
	,onStartup:function(editorWidget){
		var comboBox = editorWidget.editor;
		comboBox.set("searchAttr","value");
		comboBox.set("store",new Memory({data:[]}));
	}
	,initializeEditor:function(editorWidget){	
		var comboBox = editorWidget.editor;
		if(this.options == null){
			this.options = this.initOptions();
		}
		if(this.options){
			comboBox.get("store").data = this.options;
		}
	}
	,initOptions:function(){
		return null;
	}
});

//TOOD:fix me, can not reset value
[@keyword "agile.SelectMetadata"/]
agile.singoton("agile.SelectMetadata",agile.ComboMetadata,{
	editorClass:"dijit/form/FilteringSelect"
});

/*text editor to convert key=value pair text to options and add them to the owner widget,special use for Select widget*/
[@keyword "agile.SelectOptionMetadata"/]
agile.singoton("agile.SelectOptionMetadata",agile.TextMetadata,{
	onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){					
//		var delegate = widget.delegate;
//		array.forEach(delegate.getOptions(),function(option){
//			this.removeOption(option);	
//		},delegate);
//		
		var options = this.parse(value);					
//
//		delegate.addOption(options);
//
		widget.metadata(this.metadataCategory+"."+name,options);
		widget.delegate.set("options",options);
//		var comboBox = widget.delegate;
//		if(!comboBox.get("store")){
//			comboBox.set("store",new Memory({data:[]}));
//			comboBox.set("searchAttr","value");
//		}
//		//console.log("agile.SelectOptionMetadata[options]=",options);
//		comboBox.get("store").data = options;		
	}
	
	,format:function(options){
		var text = "";
		if(options){
			for(var i = 0; i < options.length; i++){
				text += options[i].value +"=" + options[i].label + ",";
			}
			text = text.substring(0,text.lastIndexOf(","));
		}
		return text;
	}
	,parse:function(value){
		if(!value || value.constructor == Array){
			return value;
		}else{
			var options = [];
			array.forEach(value.split(","),function(o){
				var pair = o.split("=");
				var optionVal = pair[0];
				var optionLbl = (pair.length > 1 ? pair[1]:pair[0]);
				options[options.length] = {label:optionLbl,value:optionVal};						
			});
			return options;
		}		
	}
});


[@keyword "agile.FunctionEditor"/]
agile.singoton("agile.FunctionEditor",agile.Metadata,{
	editorClass:"agile.FunctionEditor"
	,renderAsInnerHtml:true
    ,args:""
    ,templateString:"<div><div data-dojo-attach-point='titlePane' data-dojo-type='dijit/TitlePane' data-dojo-props='title:\"{label}:function({args})\" ><div class=\"editor\" data-dojo-attach-point=\"editor\" data-dojo-type=\"dijit/form/SimpleTextarea\"></div></div></div>"
    ,constructor:function(){
//    	agile.requireX("dijit/TitlePane");
//    	agile.requireX("dijit/form/SimpleTextarea");	
    }
	,initializeEditor:function(editorWidget){
		//console.log(this.declaredClass,"#########agile.FunctionEditor[initializeEditor]",this.name);
		aspect.after(editorWidget,"release",function(){	
			editorWidget.titlePane.set("title","");
		});			
		editorWidget.titlePane.set("title",lang.replace("{label}:function({args})",this));
	}

	,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
		widget.metadata(name,value);						
	}
	,toHtml:function(value,widget,sourceType){		
		var event = this.name.replace(/event./g,"");
		var html = "{lt}script type='dojo/method' event='{event}' args='{args}'{gt} {script} {lt}/script{gt}";        
		return lang.replace(html,{lt:"<",gt:">",event:event,args:this.args,script:value});
	}
	,toJson:function(value,widget,sourceType){	
		var event = this.name.replace(/event./g,"");
		var html = '{event}:function({args}){script}';        
		return lang.replace(html,{event:event,args:this.args,script:"{"+value+"}"});
	}
});	


[@keyword "agile.UploaderMetadata"/]
agile.singoton("agile.UploaderMetadata",agile.Metadata,{	
	editorClass:"agile.Uploader"
	,multiple:false	
	,acceptedMIME:null	
	[#assign templateString]
	<table><tr><td data-dojo-attach-point='labelNode' style='width:120px;cursor:help'></td><td><div data-dojo-attach-point="editor" data-dojo-type='agile.UploaderEditor' data-dojo-props='multiple:{this_multiple},title:"{i18n_select_a_file}",acceptedMIME:{this_acceptedMIME}'></div></td></tr></table>
	[/#assign]
	,templateString:"${templateString?js_string}"
	,onStartup:function(editorWidget){
//		on(editorWidget.editor,"onChange",this,function(fileNames){
//			//console.log("@@@@@@fileNames=",fileNames)
//			//this.onValueChange(editorWidget.ownerWidget,this.name,fileNames);
//		});
		
		//console.log(this.declaredClass,"[agile.UploaderMetadata]has context:",this.context != null);
		//console.log(this.declaredClass,"[agile.UploaderMetadata]editorWidget has context:",editorWidget.context != null);
		editorWidget.editor.context = editorWidget.context;
	}	
});	
[#--
//agile.singoton("agile.XMetadata",agile.Metadata,agile.StyleMetadata,{
//	 isSimple:false
//	 ,onValueChange:function(widget,name,value){
//		////console.log("onValueChange:",this.name,name,value);
//		widget.metadata(this.name+"."+name,value);
//		if(widget.delegate){
//			style.set(widget.delegate.domNode,name,value);
//		}else{
//			style.set(widget.domNode,name,value);
//		}
//	 }
////	,toHtml:function(value,widget,sourceType){
////		console.error(this.declaredClass,"toHtml(...) is not implemented");
////		return "";		
////	}
////	,toJson:function(value,widget,sourceType){
////		console.error(this.declaredClass,"toJson(...) is not implemented");
////		return "";	
////	}
//});
//
//agile.singoton("agile.XXMetadata",agile.XMetadata,{
//	chains:null
//	,onStartup:function(editorWidget){
//		 this.editorWidget = editorWidget;
//	 }
//	,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
//
//	}
////	,parse:function(text){
////		var value = {};
////		for(var e in this.editorWidget.editors){
////			lang.mixin(value,this.editorWidget.editors[e].parse(text));
////		}
////		return value;
////	}
//	,toHtml:function(value,widget,sourceType){		
////		 //console.log(this.declaredClass,"toHtml",value);
//		 var style ="";	
//		 for(var e in value){
//			 if(value[e] != null && value[e] != ""){
//				 style += this.editorWidget.editors[e].format(value[e]);
//			 }
//		 }
//		 
//		 return style;
//	 }
//	,toJson:function(value,widget,sourceType){
//		console.error(this.declaredClass,"toJson(...) is not implemented");
//		return "";	
//	}
//});
//

//agile.singoton("agile.BackgroundMetadataXXX",agile.XMetadata,{
//	editorClass:"agile.BackgroundEditorXXX"
//	,label:"background"
//	,name:"style.background"	
//   [#assign templateString]
//	<table cellspacing="5px">		
//		<tr>
//			<td title="{bg_color_tooltips}">{bg_color}</td>
//			<td>						
//				<div data-dojo-type="agile.ColorSelector" class="editor" name="backgroundColor" htmlName="background-color" ></div>						
//			</td>
//			<td>Opacity</td>					
//			<td>
//			<div data-dojo-type='agile.NumberComboBox' regExp="^(\s*|0|1|0.[1-9][0-9]*)$"  decimal2Percentage="false" class="editor" name="opacity" htmlName="opacity" placeHolder="opacity" title="opacity 0.0 ~ 1.0"></div>
//			</td>
//		</tr>
//		<tr>
//			<td title="background image" valign='top'>background image</td>
//			<td colspan="3">
//				<div data-dojo-type='agile.UploaderEditor' class="editor" name ="backgroundImage" htmlName ="background-image" title="please pick up an image" acceptedMIME="['jpg','gif','png']"></div>
//			</td>
//		</tr>
//		<tr>
//			<td>background repeat</td>
//			<td>
//			<div data-dojo-type='agile.NumberComboBox' class="editor" name="backgroundRepeat" htmlName="background-repeat" options="repeat,repeat-x,repeat-y,no-repeat"></div>					
//			</td>
//			<td>background clip</td>
//			<td>
//			<div data-dojo-type='agile.NumberComboBox' class="editor" name="backgroundClip" htmlName="background-clip" options="border-box,padding-box,center-box"></div>					
//			</td>					
//		</tr>
//		<tr>
//			<td nowrap="true">background attachement</td>
//			<td>
//				<div data-dojo-type='agile.NumberComboBox' class="editor" name="backgroundAttachement" htmlName="background-attachement" options="scroll,fixed"></div>						
//			</td>
//			<td>background origin</td>
//			<td>
//			<div data-dojo-type='agile.NumberComboBox' class="editor" name="backgroundOrigin" htmlName="background-origin" options="border-box,padding-box,center-box"></div>				
//			</td>					
//		</tr>
//		<tr>
//			<td title="">background position</td>
//			<td>
//			<div data-dojo-type='agile.NumberComboBox' class="editor" name="backgroundPositionX" htmlName="background-position" width="60px" placeHolder="X" options="top,center,bottom,0%,0" unit="px"></div>
//			<div data-dojo-type='agile.NumberComboBox' class="editor" name="backgroundPositionY" htmlName="background-position" width="60px" placeHolder="Y" options="left,center,right,0%,0" unit="px"></div>
//			</td>					
//			<td>background size</td>
//			<td>					
//			<div data-dojo-type='agile.NumberComboBox' class="editor" name="backgroundSizeW" htmlName="background-size" width="60px" placeHolder="width" options="cover,contain,0%,0" unit="px"></div>
//			<div data-dojo-type='agile.NumberComboBox' class="editor" name="backgroundSizeH" htmlName="background-size" width="60px" placeHolder="height" options="cover,contain,0%,0" unit="px"></div>					
//			</td>
//		</tr>
//	</table>
//	[/#assign]
//   ,templateString:"${templateString?js_string}"
//   ,onStartup:function(editorWidget){	
////	   if(editorWidget._initialized){
////		   return;
////	   }
////	   editorWidget._initialized = true;
////	   
//		var backgroundAttachementEditor = editorWidget.editors["backgroundAttachement"];
//		var backgroundOriginEditor = editorWidget.editors["backgroundOrigin"];
//		on(backgroundAttachementEditor,"onChange",this,function(value){
//			if(value == "fixed"){
//				backgroundOriginEditor.editor.set("disabled",true);
//				backgroundOriginEditor.editor.set("readOnly",true);
//			}else{
//				backgroundOriginEditor.editor.set("disabled",false);
//				backgroundOriginEditor.editor.set("readOnly",false);
//			}
//		});
//			
////		backgroundImageEditor.get:function(name){
////			if(name == "value"){
////				return this.fileName.get("value");
////			}else if(name == "url"){
////				return this.fileName.get("value");
////			}
////			return this.inherited(arguments);
////		}
//		
//		//filter: alpha(opacity=45)
//		
////		on(editorWidget.imageUploader,"onComplete",this,function(fileNames){
//////				//console.log("onComplete",fileNames);
////			editorWidget.editors["backgroundImage"].set("value","url('"+fileNames+"')");				
////			this.onValueChange(editorWidget.ownerWidget,"backgroundImage","url('"+fileNames+"')");
////		});		
//	}
//	,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
////		console.error(this.declaredClass,"onValueChange:",this.name,name,value);
//		widget.metadata(this.name+"."+name,value);
////			if(name == "opacity"){
////				name = "filter";
////				value = "alpha(opacity=" + value * 100 +")";
////			}
////			//console.log("#########",name,value);
//		if(name == "backgroundImage" && value != ""){
//			value = "url('" + value +"')";
//		}
//		if(widget.delegate){
//			style.set(widget.delegate.domNode,name,value);
//		}else{
//			style.set(widget.domNode,name,value);
//		}
//	}
//	,toHtml:function(value,widget,sourceType){		
//		//background: #00FF00 url(bgimage.gif) no-repeat fixed top;
//		var string = "background:{backgroundColor} {backgroundImage} {backgroundRepeat} {backgroundAttachement} {backgroundPositionX} {backgroundPositionY} {backgroundSizeW} {backgroundSizeH}";
//		var style = "";
//		
//		var mixValue = lang.mixin({
//			backgroundColor:""
//				,backgroundImage:""
//				,backgroundRepeat:""
//				,backgroundAttachement:""
//				,backgroundPositionX:""	
//				,backgroundPositionY:""	
//				,backgroundSizeW:""
//				,backgroundSizeH:""	
//				,opacity:""
//			},value);
//
//		if(mixValue.backgroundImage != ""){
//			mixValue.backgroundImage = "url('" + mixValue.backgroundImage +"')";
//		}
//		
//		if(mixValue.opacity != ""){
//			if(dojo.isWebKit != undefined){
//				style += "opacity:" + mixValue.opacity +";" 
//			 }else if(dojo.isMozilla != undefined){
//				 style += "opacity:" + mixValue.opacity +";"
//			 }else if(dojo.isOpera != undefined){
//				 style += "opacity:" + mixValue.opacity +";"
//			 }else if(agile.isIE >= 10){
//				 style += "opacity:" + mixValue.opacity +";"
////					 style += "filter:alpha(opacity=" + parseFloat(mixValue.opacity) * 100 +");"
//			 }
//		}
////			//console.log("toHtml:",value);
//		style += lang.replace(string,mixValue).trim();
//		
//		return style;
//	}
//	,toJson:function(value,widget,sourceType){	
//		//console.log("toJson:",value);
//		return "background:";
//	}
//});


//agile.singoton("agile.BorderMetadata",agile.XXMetadata,{
//	editorClass:"agile.BorderMetadata"
//	,label:"Border"
//	,name:"style.border"	
//   [#assign templateString]
//	<table cellspacing="1px">
//
////		[#list ["left","top","right","bottom"] as edge]
////		<tr>
////			<td nowrap="true">border [#if edge = "left"]([/#if]${edge}[#if edge = "left"])[/#if]</td>
////			<td><div data-dojo-type='agile.NumberComboBox' title="border width" class="editor" name="border${edge?capitalize}Width" options="thin,medium,thick,0"  unit="px" placeHolder="width"></div></td>
////			<td><div data-dojo-type='agile.NumberComboBox' title="border style" class="editor" name="border${edge?capitalize}Style" options="none,hidden,dotted,dashed,solid,double,groove,ridge,inset,ouset" placeHolder="style" defValue="none"></div></td>
////			<td><div data-dojo-type='agile.ColorSelector' title="border color" class="editor" name="border${edge?capitalize}Color"></div></td>
////			<td width="80px"></td>
////			<td width="80px"></td>					
////		</tr>
////		[/#list]				
////		<tr>
////			<td nowrap="true">outline </td>
////			<td><div data-dojo-type='agile.NumberComboBox' title="outline width" class="editor" name="outlineWidth" options="thin,medium,thick,0" unit="px" placeHolder="width" defValue="medium"></div></td>
////			<td><div data-dojo-type='agile.NumberComboBox' title="outline style" class="editor" name="outlineStyle" options="none,hidden,dotted,dashed,solid,double,groove,ridge,inset,ouset" placeHolder="style" defValue="none"></div></td>
////			<td><div data-dojo-type='agile.ColorSelector' title="outline color" class="editor" name="outlineColor"></div></td>
////			<td></td>
////		</tr>
//	
//		
//		<tr>	
//			<td>
//				<div data-dojo-type='agile.BorderEditor' class="xeditor" ></div>
//			</td>					
//		</tr>	
//		<tr>				
//			<td>
//				<div data-dojo-type='agile.RadiusEditor' class="xeditor" ></div>
//			</td>					
//		</tr>				
//		<tr>			
//			<td valign="top"><div data-dojo-type='agile.BoxShadowEditor' class="xeditor"></div></td>
//		</tr>
//		
////		<tr>
////			<td>border image</td>				
////			<td colspan="4"><div data-dojo-type='agile.BorderImageEditor' class="editor" name="borderImage"></div></td>
////		</tr>
////		<tr>
////			<td rowspan="2" valign="top">image</td>
////			<td rowspan="2" valign="top">
////				<div data-dojo-type='agile.NumberComboBox' title="source" class="editor" name="borderImageSource" options="0,0%" unit="px"></div>					
////			</td>
////			<td>
////				<div data-dojo-type='agile.NumberComboBox' class="editor" name="borderImageWidth" options="auto,0,0%"  unit="px" title="width"></div>
////			</td>
////			<td>
////				<div data-dojo-type='agile.NumberComboBox' class="editor" name="borderImageRepeat" options="stretch,repeat,round" title="repeat"></div>
////			</td>
////		<tr>				
////			<td>					
////				<div data-dojo-type='agile.NumberComboBox' class="editor" name="borderImageOutset" options="0,0%,fill" title="outset"></div>
////				
////			</td>
////			<td>					
////				<div data-dojo-type='agile.NumberComboBox' class="editor" name="borderImageSlice" options="0,0%,fill" title="slice"></div>
////			</td>
////		</tr>
//		
//	</table>
//	[/#assign]
//   ,templateString:"${templateString?js_string}"
////	,onStartup:function(editorWidget){
////		[#list ["Width","Style","Color"] as attr]
////		on(editorWidget.editors["borderLeft${attr}"],"onChange",editorWidget,function(value){
////			[#list ["Top","Right","Bottom"] as edge]	
////			if(this.editors["border${edge}${attr}"].get("value",true) == ""){
////				this.editors["border${edge}${attr}"].set("value",value);	
////			}
////			[/#list]
////		});
////		[/#list]				
////	}
//	,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
////		//console.log(this.declaredClass,"onValueChange:",this.name,name,value);
////
////		widget.metadata(this.name+"."+name,value);
////			
////		if("borderWidth,borderStyle,borderColor".indexOf(name) != -1){return;} 
////		
////		if(widget.delegate){
////			style.set(widget.delegate.domNode,name,value);
////			if(name.indexOf("Radius") != -1){
////				style.set(widget.domNode,name,value);
////			}
////		}else{
////			style.set(widget.domNode,name,value);
////		}
//	}
////	,toHtml:function(value,widget,sourceType){		
////
////		var mixValue = lang.mixin({
////				borderRadius:""/*,borderTopLeftRadius:"",borderTopRightRadius:"",borderBottomLeftRadius:"",borderBottomRightRadius:""*/
////				,borderWidth:"",borderStyle:"",borderColor:""
////				,borderLeftWidth:"",borderLeftStyle:"",borderLeftColor:""
////				,borderTopWidth:"",borderTopStyle:"",borderTopColor:""	
////				,borderRightWidth:"",borderRightStyle:"",borderRightColor:""
////				,borderBottomWidth:"",borderBottomStyle:"",borderBottomColor:""	
////				,outlineColor:"",outlineStyle:"",outlineWidth:""
////				,boxShadow:""
////		},value);
////
////		var html = "";
////		var borderStyle = lang.replace("border-style:{borderTopStyle} {borderRightStyle} {borderBottomStyle} {borderLeftStyle}",mixValue).trim();		
////		var borderColor = lang.replace("border-color:{borderTopColor} {borderRightColor} {borderBottomColor} {borderLeftColor}",mixValue).trim();
////		var borderWidth = lang.replace("border-width:{borderTopWidth} {borderRightWidth} {borderBottomWidth} {borderLeftWidth}",mixValue).trim();
////		//var borderRadius = lang.replace("border-radius:{borderTopLeftRadius} {borderTopRightRadius} {borderBottomLeftRadius} {borderBottomRightRadius}",mixValue).trim();
////		var borderRadius = lang.replace("border-radius:{borderRadius}",mixValue).trim();
////		var outline = lang.replace("outline:{outlineColor} {outlineStyle} {outlineWidth}",mixValue).trim();
////		if(borderStyle != "border-style:")
////			html += borderStyle+";";
////		
////		if(borderColor != "border-color:")
////			html += borderColor+";";
////		
////		if(borderWidth != "border-width:")
////			html += borderWidth+";";
////		
////		if(borderRadius != "border-radius:")
////			html += borderRadius+";";
////		
////		if(outline != "outline:")
////			html += outline+";";
////		
////		if(mixValue.boxShadow != ""){
////			html += "box-shadow:"+mixValue.boxShadow+";";
////		}
////		return html;
////	}
////	,toJson:function(value,widget,sourceType){	
////		//console.log("toJson:",value);
////		return "background:";
////	}
//});	


//agile.singoton("agile.TransformMetadata",agile.XXMetadata,{
//	editorClass:"agile.TransformEditor"
//	,label:"2D/3D Transform"
//	,name:"style.transformx"			
//   [#assign templateString]
//	<table cellspacing="5px">	 
//		<tr>
//			<td colspan="4"><div data-dojo-type="agile.TransitionEditor" class="xeditor"></div></td>
//		</tr> 
//		<tr>
//			<td colspan="4"><div data-dojo-type="agile.TransformEditor" class="xeditor"></div></td>
//		</tr>  
//	</table>
//	[/#assign]
//	 ,templateString:"${templateString?js_string}"
////	 ,onStartup:function(editorWidget){
////		 ////console.log("@@@@@@####",editorWidget.editors);
////		 this.editorWidget = editorWidget;
////	 }
////	,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){		
////
////	}
////	,toHtml:function(value,widget,sourceType){		
////		 //console.log(this.declaredClass,"toHtml",value);
////		 var style ="";	
////		 for(var e in value){
////			 style += this.editorWidget.editors[e].format(value[e])+";"; 
////		 }
////		 return style;
////	 }
//});	   

//agile.singoton("agile.PseudoMetadata",agile.XMetadata,{
//	editorClass:"agile.PseudoEditor"
//	,label:"Pseudo"
//	,name:"style.pseudo"		
//	[#assign templateString]
//	<div><div data-dojo-type="agile.PseudoEditor" class="xeditor" name="pseudo"></div></div>
//	[/#assign]
//	,templateString:"${templateString?js_string}"	
//	,onStartup:function(editorWidget){			
//		
//	}
//	,toHtml:function(value,widget,sourceType){
//		//console.log("value=",value);
//	}
//});

//agile.singoton("agile.TextStyleMetadata",agile.XMetadata,{
//	editorClass:"agile.TextStyleEditor"
//	,label:"Text"
//	,name:"style.text"		
//   [#assign templateString]
//	<table cellspacing="5px">
//		<tr>
//		<td>font style</td><td><div data-dojo-type='agile.NumberComboBox' class="editor" name="fontStyle" htmlName="font-style" options="normal,italic,oblique" title="font style"></div></td>
//		<td>font weight</td><td><div data-dojo-type='agile.NumberComboBox' class="editor" name="fontWeight" htmlName="font-weight" options="normal,bold,bolder,lighter,0" unit="px" title="font weight"></div></td>
//		<td>font family</td><td><div data-dojo-type='agile.NumberComboBox' class="editor" name="fontFamily"  htmlName="font-family"  options="Times New Roman,Georgia,Serif" title="font family"></div></td>
//		</tr>					
//		<tr>	
//		<td>font size</td><td><div data-dojo-type='agile.NumberComboBox' class="editor" name="fontSize"  htmlName="font-size" options="xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger,0,0%"  unit="px" title="font size"></div></td>
//		<td>font stretch</td><td><div data-dojo-type='agile.NumberComboBox' class="editor" name="fontStretch"  htmlName="font-stretch" options="normal,wider,narrower,ultra-condensed,extra-condensed,condensed,semi-condensed,semi-expanded,expanded,extra-expanded,ultra-expanded" title="font stretch"></div></td>
//		<td>font variant</td><td><div data-dojo-type='agile.NumberComboBox' class="editor" name="fontVariant"  htmlName="font-variant" options="normal,small-caps" title="font variant"></div></td>
//		</tr>
//		<tr>
//			<td>color</td>
//			<td><div data-dojo-type='agile.ColorSelector' title="color" class="editor" name="color" htmlName="color"></div></td>				
//			<td nowrap="true">line height</td>
//			<td><div data-dojo-type='agile.NumberComboBox' class="editor" name="lineHeight" htmlName="line-height" options="normal,0,0%,inherit" unit="px" title=""></div></td>				
//			<td>direction</td>
//			<td><div data-dojo-type='agile.NumberComboBox' class="editor" name="direction" htmlName="direction" options="ltr,rtl,inherit" title=""></div></td>
//			<td></td>
//			<td></td>
//		</tr>
//		<tr>
//			<td>white space</td>
//			<td><div data-dojo-type='agile.NumberComboBox' class="editor" name="whiteSpace" htmlName="white-space" options="normal,pre,nowrap,pre-wrap,pre-line,inherit" title=""></div></td>
//			<td nowrap="true">letter spacing</td>
//			<td><div data-dojo-type='agile.NumberComboBox' class="editor" name="letterSpacing" htmlName="letter-spacing" options="normal,0,inherit" unit="px" title=""></div></td>
//		</tr>
//		<tr>
//			<td>word wrap</td>
//			<td><div data-dojo-type='agile.NumberComboBox' class="editor" name="wordWrap" htmlName="word-wrap" options="normal,break-word" title=""></div></td>
//			<td>word break</td>
//			<td><div data-dojo-type='agile.NumberComboBox' class="editor" name="wordBreak" htmlName="word-break" options="normal,break-all,keep-all" title=""></div></td>
//			<td>word spacing</td>
//			<td><div data-dojo-type='agile.NumberComboBox' class="editor" name="wordSpacing" htmlName="word-spacing" options="normal,0,inherit" unit="px" title=""></div></td>
//		</tr>
//		<tr>
//			<td>text align</td>
//			<td><div data-dojo-type='agile.NumberComboBox' class="editor" name="textAlign" htmlName="text-align" options="left,right,center,justify,inherit" title=""></div></td>
//			<td>text indent</td>
//			<td><div data-dojo-type='agile.NumberComboBox' class="editor" name="textIndent" htmlName="text-indent" options="0,0%,inherit" unit="px" title=""></div></td>
//			<td nowrap="true">text decoration</td>
//			<td><div data-dojo-type='agile.NumberComboBox' class="editor" name="textDecoration" htmlName="text-decoration" options="none,underline,overline,line-through,blink,inherit" title=""></div></td>
//		</tr>
//		<tr>
//			<td nowrap="true">text overflow</td>
//			<td><div data-dojo-type='agile.NumberComboBox' class="editor" name="textOverflow" htmlName="text-overflow" options="clip,ellipsis" title=""></div></td>						
//			<td nowrap="true">text transform</td>
//			<td><div data-dojo-type='agile.NumberComboBox' class="editor" name="textTransform" htmlName="text-transform" options="none,uppercase,capitialize,lowercase,inherit" title=""></div></td>
//		</tr>
//		<tr>	
//			<td nowrap="true">text shadow</td>
//			<td colspan="4"><div data-dojo-type='agile.TextShadowEditor' class="editor" name="textShadow" htmlName="text-shadow" title=""></div></td>
//		</tr>
//	</table>  
//	[/#assign]
//	,templateString:"${templateString?js_string}"	
//	,onStartup:function(editorWidget){
//		this.htmlNames = {};
//		for(var name in editorWidget.editors){
//			this.htmlNames[name] = editorWidget.editors[name].htmlName;
//		}		
//	}
//	,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){	
////		//console.log(this.declaredClass,"onValueChange:",name,value)
//		widget.metadata(this.name+"."+name,value);	
//		style.set(widget.domNode,name,value);
//	}
//	,toHtml:function(value,widget,sourceType){
////		//console.log(this.declaredClass,"@@@@toHtml",value,this.htmlNames);
//		
//		var style = "";
//		for(var name in value){
//			if(value[name]){
//				style += this.htmlNames[name] +":" + value[name]+";";
//			}
//		}		
//		return style;		
//	}
//});

//
//
//agile.singoton("agile.RuleEditorMetadata",agile.XMetadata,{
//	editorClass:"agile.RuleEditor"
//	,label:"Rule Editor"
//	,name:"style.rule"	
//   [#assign templateString]
//	<table cellspacing="5px">	    	
//		<tr>
//			<td>Class Name</td><td><div data-dojo-type='agile.NumberComboBox' class="editor" name="className" placeHolder="" title="class name"></div></td>			
//		</tr>	
//		<tr>	
//			<td colspan="2"><div data-dojo-type='dijit/form/SimpleTextarea' class="editor" name="rule" style="width:300px;height:100px"></div></td>
//		</tr>
//	</table>
//	[/#assign]
//	,templateString:"${templateString?js_string}"
//	,onStartup:function(editorWidget){
//	
//	}
//	,onValueChange:function(widget,name,value){
//		//console.log("RuleEditorMetadata onValueChange:",this.name,name,value);
////		widget.metadata(this.name+"."+name,value);
////		if(widget.delegate){
////			style.set(widget.delegate.domNode,name,value);
////		}else{
////			style.set(widget.domNode,name,value);
////		}
//	 }
//	 ,toHtml:function(value,widget,sourceType){
//		 return "";
//	 }
//});
--]
